{extend name="public/common"}

{block name="style"}
<title>公司发文</title>
<link rel="stylesheet" href="/home/css/dispatch/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="head">
        <div v-for="(item,key) in navbar" :class="selected == (key+1) ? 'active' : ''" @click="choose(key+1)">{{item}}</div>
    </div>
    <div class="body">
        <div class="banner" v-for="(child,i,key) in banner" v-show="selected == (key+1) && child.length > 0 ">
            <mt-swipe :show-indicators="true" :auto="3000">
                <mt-swipe-item v-for="item in child" @click.native="toDetail(item.id)">
                    <img :src="item.path" />
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div infinite-scroll-immediate-check="false" v-infinite-scroll="loadMore"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="10">
            <div class="list" v-for="(child,i,key) in list" v-show="selected == (key+1)">
                <ul>
                    <li v-for="item in child" @click="toDetail(item.id)">
                        <div class="img-box" v-if="item.path">
                            <img :src="item.path" />
                        </div>
                        <div class="content">
                            <p class="title">{{item.title}}</p>
                            <div class="time">
                                <div>
                                    <span class="mr20" v-if="item.path">{{item.publisher}}</span>
                                    <span>{{item.create_time | timeToString('ymd')}}</span>
                                </div>
                                <span class="view">{{item.views}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="loading-more" v-if="len >= 8">
                <div v-if="loadOver && len >= 8" class="load" style="font-size:0.3rem">{{texts}}</div>
                <div v-else v-show="loading">
                    <mt-spinner :type="3" color="#999"></mt-spinner>
                </div>
            </div>
            <div class="empty" v-if="len == 0">
                <img class="empty-img" src="/home/images/common/empty.png" alt="">
                <p class="empty-title">暂无内容，敬请期待</p>
                <p class="empty-text">to be continued...</p>
            </div>
        </div>
    </div>

</div>
{/block}

{block name="script"}
<script>
    console.log({$list})
    var vw = new Vue({
        el: "#app",
        data: {
            selected: 1,
            banner: {$banner},
            texts: '没有更多了~',
            loadOver: true,
            loading: false,
            list: {$list},
            len: {$list}.list_1.length,
            navbar: ['行政','党建','工会']
        },
        created() {
            this.selected = window.sessionStorage.getItem('dispatch_type')?window.sessionStorage.getItem('dispatch_type'):1;
            window.sessionStorage.removeItem('dispatch_type');
            this.len = this.list['list_'+this.selected].length;
        },
        methods: {
            choose(key) {
                var type = 'list_'+key;
                this.selected = key;
                this.len = this.list[type].length;
                this.loadOver = true;
                this.loading = false;
            },
            loadMore() {
                var _this = this;
                console.log(_this.len)
                if (_this.len < 8) {
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Dispatch/index")}', {
                    'len': _this.len,
                    'type': _this.selected,
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.body;
                    var type = 'list_'+_this.selected;
                    console.log(data)
                    if (data.code == 1) {
                        if (data.data.length == 8) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.list[type].push(data.data[i]);
                        }
                        _this.len = _this.list[type].length;
                    } else {
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message: '加载失败，请重试', duration: 1500});
                    _this.loadOver = true;
                })
            },
            toDetail: function(id){
                window.location.href = '/home/dispatch/detail/id/'+id+'.html';
                window.sessionStorage.setItem('dispatch_type',this.selected);
            }

        }
    })
</script>
{/block}
